<template>
    <div>
      <van-row @click="fun">
        <van-col span="6">
          <img :src="avatarSrc" alt />
        </van-col>
  
        <van-col span="15" class="login">
          <h4>{{nickname}}</h4>
        </van-col>
        <van-col span="3" class="icon">
          <van-icon name="arrow" />
        </van-col>
      </van-row>
        <van-grid :column-num="3">
            <van-grid-item style="height:1.2rem" icon="label-o" text="我的订单" />
            <van-grid-item style="height:1.2rem" icon="goods-collect-o" text="礼品卡" />
            <van-grid-item style="height:1.2rem" icon="bill-o" text="优惠券" />
            <van-grid-item style="height:1.2rem" icon="location-o" text="我的收藏" />
            <van-grid-item style="height:1.2rem" icon="flag-o" text="我的足迹" />
            <van-grid-item style="height:1.2rem" icon="contact" text="会员福利" />
            <van-grid-item style="height:1.2rem" icon="aim" text="地址管理" />
            <van-grid-item style="height:1.2rem" icon="warn-o" text="账号安全" />
            <van-grid-item style="height:1.2rem" icon="service-o" text="联系客服" />
            <van-grid-item style="height:1.2rem" icon="question-o" text="帮助中心" />
            <van-grid-item style="height:1.2rem" icon="smile-comment-o" text="意见反馈" />
            <van-grid-item style="height:1.2rem;color:brown" icon="cross" text="退出登录"  @click="tuichu()" />
        </van-grid>
          <transition name="van-fade">
          <div class="login-model" v-show="isShowModal" >
            <div class="close-model" @click="isShowModal=!isShowModal"></div>
            <van-form @submit="onSubmit"  class="login-form">
              <van-field
                v-model="username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
              <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
              </div>
            </van-form>
          </div>
        </transition>
    </div>
</template>

<script>
import {GetLogin,} from "@/request/api.js"
export default {
    name: 'WorkspaceJsonUser',

    data() {
        return {
          avatarSrc: require("../assets/login.png"),
          username: '',
          password: '',
          isShowModal:false,
          nickname:"用户登陆"
        };
    },
    created(){
        //获取localStorage有没有token值 有token就表示登陆
       let token = localStorage.getItem("token");
        if(token){
            //表示已经有登陆状态,渲染用户信息
                let userInfo = JSON.parse(localStorage.getItem("userInfo"))
                this.nickname = userInfo.nickname


                // this.avatarSrc = userInfo.avatar
        }
    },

    mounted() {
        
    },

    methods: {
      onSubmit(values) {
        let username = values["用户名"]
        let pwd = values["密码"]
        GetLogin({
          username,
          pwd
          })
        .then(res=>{  
              // console.log(res.data)
              //提示登陆成功
              this.$toast.success('登陆成功');
              //保存Token到本地
              localStorage.setItem("token",res.data.token);
              localStorage.setItem("userInfo",JSON.stringify(res.data.userInfo));
              //1秒后关闭关闭登陆窗口
              setTimeout(()=>{
                  this.isShowModal = !this.isShowModal 
                  this.nickname = res.data.userInfo.username
                  // console.log(this.nickname);
                  // this.avatarSrc = res.data.userInfo.avatar
              },1000)
              //
        })
      },
      //判断用户是否登陆,如果登陆直接return,没有登陆就isShowModal取反
      fun(){
        let token = localStorage.getItem("token")
        // console.log(token);
        if(token){
          return 
        }
        this.isShowModal = !this.isShowModal
      },

      //退出
      tuichu(){
        localStorage.removeItem("token")
        this.nickname="用户登陆"
      }
    },
    
};
</script>

<style lang="less" scoped>
    .van-row {
        width: 100%;
        height: 1.1rem;
        background-color: #333;
        padding: 0.2rem 0.1rem;
        box-sizing: border-box;
        position: relative;
        .van-col {
          img {
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 50%;
            margin-right: 0.1rem;
            background-image: url(../assets/login.png);
          }
        }
        .login {
          h4 {
            width: 62%;
            position: absolute;
            top: 50%;
            left: 0.9rem;
            transform: translateY(-50%);
            color: #fff;
            font-size: 0.14rem;
          }
        }
        .icon {
          .van-icon {
            color: #fff;
            position: absolute;
            top: 45%;
            left: 94%;
          }
        }
      }
//登录
.login-model{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top:0;
  background-color: rgba(0,0,0,0.5);
  z-index: 99;
}
.login-form{
  width: 90%;
  background-color: #fff;
  padding-bottom: 0.2rem;
  position: absolute;
  left: 50%;
  top: 40%;
  margin-left: -45%;
}
.close-model{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}
</style>